<template>
<div v-if="mode">

    <navbar ></navbar>

    <!-- 视频播放以及信息 -->
    <div class="article_wrap">
        <div class="video">
            <video controls :src="mode.content"></video>
        </div>

        <div class="detail_infoText">
            
            <!-- 分类和视频名字 -->
            <div>
                <span class="title">{{mode.category.title}}</span>
                {{mode.name}}
            </div>

            <!-- 昵称 观看量 弹幕数 时间 -->
            <div class="playInfo">
                <span class="userinfo_name">{{mode.userinfo.name}}</span>
                <span class="play_count">999次观看</span>
                <span class="danmu">999个弹幕</span>
                <span class="date">{{mode.date}}</span>
            </div>

            <!-- 收藏转发分享 图标及按钮 -->
            <div class="shoucang_wrap">
                <div class="icon_box"  @click="collection" :class="{active:collectionActive}">
                   <van-icon name="star"  class="icon_star"  /> 收藏
                </div>
                
                <div class="icon_box"  @click="subscriptClick" :class="{active:subActive}">
                    <van-icon name="like"  class="icon_star down"/>关注用户
                </div>
                <div class="icon_box">
                    <van-icon name="share"  class="icon_star"/>分享
                </div>

            </div>

        </div>
        
    </div>

    <!-- 推荐视频 -->
    <div class="commend_wrap">
        <h3>推荐视频</h3>
        <detail class="commend_item" v-for="(item,index) in commendList" :key="index"  :detailItem="item" @sendId="sendId" ></detail>
    </div>

    <!-- 评论     -->
    <div>
        <!-- 自发表评论 -->
        <mycomment :len="lengs" @postcomment="postSuccess"  ref="commentCom"></mycomment>

        <!-- 评论内容 -->
        <comment-content @lengthSelect="getCount" @publishClick="postchildClick" ref="commentPublish"></comment-content>
        
        
    </div>

    

</div>
</template>

<script>

    import navbar from "../components/common/navbar.vue"
    import detail from "./detail.vue"
    import mycomment from "../components/comment/myComment.vue"
    import commentContent from "../components/comment/commentContent.vue"

export default {
    data() {
        return {
           mode:null,
           commendList:[],
           id:null,
           lengs:null,
           postComment:{
               comment_content:'',
               comment_date:'',
               parent_id:null
           },
           collectionActive:false,
           subActive:false
        };
    },


    methods: {
        //获取视频信息
       async getArticle(){
           const res = await this.$http.get('/article/'+ this.$route.params.id)
           this.mode = res.data[0]

           if(this.mode){
               this.likeInit()
           }


       },

        //获取推荐视频列表
        async getcommentData(){
          const res = await this.$http.get('/commend')
          this.commendList = res.data
       },

        //接收子组件传送过来的id值
       sendId(e){
           //id值改变时就调用 watch 属性里的方法
           this.id = e
       },

        //获取评论的数量
       getCount(e){
        //    console.log("++++:"+e.length);
           this.lengs = e
       },

        //发表评论
       async postSuccess(res){
            //    console.log(res);
            const time = new Date()
            let m = time.getMonth()+1
            let d = time.getDate()
            if(m<10){
                m='0'+m
            } 
            if(d<10){
                d='0'+d
            } 
        
            let str = m+'-'+d

            this.postComment.comment_content = res
            
            this.postComment.comment_date = str
            this.postComment.article_id = this.$route.params.id
            

            const result = await this.$http.post(`/comment_post/${localStorage.getItem('id')}`,this.postComment)
            
            // 这个方法的使用者中，定义一个ref,定义之后就可以通过ref的值去调用这个使用者（这个组件或者元素）里面的函数方法。
            // this.$ref.commentPublish.getComment()

            if(result.status==200){
                this.$msg.success("评论成功")
            }
            this.postComment.parent_id=''

            this.$router.go(0)
        
           
       },

        //大众评论的内容,并且接收子组件的用户评论的id
        postchildClick(id){
            // console.log("content:"+id);

            this.postComment.parent_id = id
            //点击content组件的回复，然后聚焦到myComment 的input输入框中
            this.$refs.commentCom.focusInput()

        },

        //收藏
        async collection(){
            if(localStorage.getItem('token')){
                
                    const res = await this.$http.post(`/collection/${localStorage.getItem('id')}`,{
                        article_id:this.$route.params.id
                    })
                    
                    if(res.data.msg=='收藏成功'){
                        this.collectionActive = true
                        this.$msg.success("收藏成功")
                        
                    }else{
                        this.collectionActive = false
                        
                    }


            }else{
                this.$msg.fail("需要先去登录才能进行操作！")

            }

        },

        //进入页面获取当前是否收藏
        async collectionInit(){
            
            if(localStorage.getItem('token')){
                const res = await this.$http.get(`/collection/${localStorage.getItem('id')}`,{
                    params:{
                        article_id:this.$route.params.id
                    }
                })
                // console.log(res.data.success);
                this.collectionActive = res.data.success
                
            }
            
        },


        //关注用户
        async subscriptClick(){
            if(localStorage.getItem('token')){
                
                    const res = await this.$http.post(`/sub_scription/${localStorage.getItem('id')}`,{
                        sub_id:this.mode.userid
                    })
                    // console.log(res);
                    
                    
                    if(res.data.msg=='关注成功'){
                        this.subActive = true
                        this.$msg.success("关注成功")
                    }else{
                        this.subActive = false
                        
                    }


            }else{
                this.$msg.fail("需要先去登录才能进行操作！")

            }

        },

        //进入页面获取当前是否 关注用户
        async likeInit(){
            
            if(localStorage.getItem('token')){
                const res = await this.$http.get(`/sub_scription/${localStorage.getItem('id')}`,{
                    params:{
                        sub_id:this.mode.userid
                    }
                })
                // console.log(res.data.success);
                this.subActive = res.data.success
                
            }
            
        },


       



    },
    

    components:{
        navbar,detail,mycomment,commentContent
    },
    created(){
        this.getArticle()
        this.getcommentData()
        this.getCount()
        this.collectionInit()
        // this.likeInit()

    },
    watch:{

        id(){
            // console.log(this.$route.params.id);//当前页面的路由

            this.getArticle()
            this.$msg.loading("加载中...")

            setTimeout(() => {
                this.$msg.clear()
                this.$msg.success("加载成功")
            }, 400);


        },
        $route(){
            this.getArticle()
            this.getCount()
            this.collectionInit()
        }


    }


    }
</script>


<style scoped lang="less">

    .article_wrap{
        background-color: #fff;

        .video{
            width: 100%;
            video{
                width: 100%;
            }
        }

        .detail_infoText{
            padding: 3vw;

            .title{
                background-color: #eee;
                padding: 1px 10px;
                color:#fb7299;   
                border-radius:30px;
            }
            .playInfo{
                padding-top: 1.333vw;
                font-size:18px;
                .userinfo_name{
                    font-weight: 570;
                }
                .play_count{
                    padding-left: 4vw;
                }
                .danmu{
                    padding-left: 4vw;
                }
                .date{
                    padding-left: 4vw;
                }

            }

            .shoucang_wrap{
                padding: 2.667vw 4vw 2.667vw 0;
                display: flex;
                .icon_box{
                    display: flex;
                    padding-right: 4vw;
                    justify-content: center;
                    align-items: center;

                    .icon_star{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        // color:#757575;
                        font-size:20px; 
                        padding-right: 3px;
                    }
                }

                .active{
                    color: #fb7299;
                }
            }

     }
    }


    .commend_wrap{

        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        
       h3{
           width: 100%;
           margin:0;
           margin-top:10px;
           background-color: #fff;
       }

        .commend_item{
            width: 45%;
            padding: 10px 5px;
        }


    }


    



</style>